<template>
  <div>
    <ul v-if="isShow">
      <li><img src="../../../assets/fail.jpg" alt="" width="181"></li>
      <li>请等待支付结果{{count}}秒</li>
    </ul>
    <ul v-if="payResult==true&&isShow==false">
      <li><img src="../../../assets/offersuccess.png" alt="" width="40"></li>
      <div v-if="orderdetailList.length==1 & orderdetailList[0].isAppoint==2">
        <li>支付完成,预约中</li>
        <li>预约结果将以短信的形式发送到您的手机，请注意查收！如有疑问请拨打24小时客服热线4000713000。</li>
      </div>
      <div v-else>
        <li>支付完成</li>
      </div>
      <li>
        <wv-button type="default" :mini="true" @click="goIndex()">回到首页</wv-button>
        <wv-button type="default" :mini="true" @click="lookDetail(orderDetail,orderId)">查看详情</wv-button>
      </li>
    </ul>
    <ul v-if="payResult==false&&isShow==false">
      <li><img src="../../../assets/fail.jpg" alt="" width="181"></li>
      <li>支付失败</li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  import {orderPayResult, getAccountGoods} from '../../../../test/unit/http'

  export default {
    name: '',
    props: {},
    data() {
      return {
        payResult: {type: Boolean},
        orderdetailList: [],
        isShow: true,
        orderId: "",
        count: 5
      };
    },
    methods: {
      goIndex() {
        this.$router.push({path: 'index'})
      },
      lookDetail(orderDetail, orderId) {
        this.$router.push({path: 'allorderdetail', query: {orderId: orderId}})
      },
      getAccountGoodsData(params) {
        getAccountGoods(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            let accountGoodsId = res.object.accountGoodsId;
            let vipcardCategoryCode = res.object.vipcardCategoryCode;
            if (vipcardCategoryCode == 'VIP') {
              this.$router.push({path: 'wanshanziliao', query: {accountGoodsId: accountGoodsId, type: 1}})
            }
            if (vipcardCategoryCode == 'GUEST') {
              this.$router.push({path: 'yaokewanshan', query: {accountGoodsId: accountGoodsId, type: 1}})
            }
          }
        })
      },
      getOrderPayResult(params) {
        orderPayResult(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.payResult = res.object.payResult;
            this.orderId = res.object.orderId;
            if (this.payResult) {
              this.orderdetailList = res.object.orderdetailList;
              let length = this.orderdetailList.length;
              if (length == 1) {
                let orderdetail = this.orderdetailList[0];
                if (orderdetail.categoryCode == 'vipcard_2') {
                  if (orderdetail.buyNum == 1) {
                    this.getAccountGoodsData({orderdetailId: orderdetail.orderdetailId});
                  } else {
                    this.$router.push({path: 'myguibinka'})
                  }
                }
                if (orderdetail.categoryCode == 'vipcard_1') {
                  this.$router.push({path: 'mylipinka'})
                }
              }
            }
          }
        })
      }
    },
    mounted() {

    },
    created() {
      let orderNum = this.$route.query.orderNum;
      let params = {payInfoId: orderNum};
      const TIME_COUNT = 5;
      this.timer = setInterval(() => {
        if (this.count > 0 && this.count <= TIME_COUNT) {
          this.count--;
        } else {
          clearInterval(this.timer);
          this.timer = null;
          this.isShow = false;
          this.getOrderPayResult(params);
        }
      }, 1000)
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  ul {
    padding-top: 50px;
    text-align: center;

    li:nth-child(2) {
      font-size: 18px;
      color: #111;
      margin: 10px 0;
    }

    li:last-child {
      display: flex;
      padding: 10px;
      margin-top: 20px;
      justify-content: space-around;

      .weui-btn + .weui-btn {
        margin-top: 0;
      }

      button {
        flex: 1;
        font-size: 15px;
        border-radius: 25px;
        height: 40px;
        line-height: 40px;
      }

      :first-child {
        color: #2e94f0;
        background-color: #fff;
        margin-right: 10px;
        border: 1px solid #2e94f0;
      }

      :last-child {
        background-color: #2e94f0;
        color: #fff;
      }
    }
  }
</style>
